<div  class="content-wrapper"  [@routerTransition]>
    <menu-Info-container [kind]="kind">
        <div role="actions">
            <div style="display: none;" class="btn-group" dropdown placement="button right"  *ngIf="permissionDic['Pages_Manage_Messages_ExportOut']" >
                <button id="dropdownButtonExcelOperations" dropdownToggle type="button" class="btn btn-outline-success dropdown-toggle mr-1"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="dropdownMenuExcelOperations">
                    <i class="far fa-file-excel"></i> {{"ExportOut" | localize}}
                </button>
                <ul id="dropdownMenuExcelOperations" class="dropdown-menu dropdown-menu-right dropdown-excel-operations" role="menu" *dropdownMenu aria-labelledby="dropdownButtonExcelOperations">
                    <li role="menuitem">
                        <a class="dropdown-item text-dark" id="ExportDataToExcelButton" (click)="exportToExcel()"
                           href="javascript:;">
                            <i class="fa fa-download mr-2 mt-1 text-dark" style="font-size: 1rem;"></i>
                            {{'ExportToExcel' | localize}}
                        </a>
                    </li>
                </ul>
            </div>
            <button  *ngIf="permissionDic['Pages_Manage_Messages_ExportOut']" (click)="exportToExcel()" style="margin-right: .5rem" class="btn btn-default">
                <i class="far fa-file-excel"></i> {{"ExportOut" | localize}}
            </button>
            <button  *ngIf="permissionDic['Pages_Manage_Messages_Update']" (click)="changeState(true)" class="btn btn-default  mr-1">
                <i class="fa bi bi-check-lg"></i> {{"MessageHasRelease" | localize}}
            </button>
            <button  *ngIf="permissionDic['Pages_Manage_Messages_Update']" (click)="changeState(false)" class="btn btn-default  mr-1">
                <i class="fa bi bi-x-lg"></i> {{"MessageNotRelease" | localize}}
            </button>
            <button  *ngIf="permissionDic['Pages_Manage_Messages_Delete']" (click)="delete()" class="btn btn-warning">
                <i class="fa fa-trash"></i> {{"Delete" | localize}}
            </button>
            
        </div>

        <div role="content">
            <form class="form" autocomplete="new-password">
                <div>
                    <div class="row align-items-center mb-4">
                        <div class="col-xl-12">
                            <div class="form-group m-form__group align-items-center">
                                <div class="input-group">
                                    <input [(ngModel)]="filterText" name="filterText" autoFocus
                                        class="form-control m-input" [placeholder]="l('SearchWithThreeDot')"
                                        type="text">
                                    <div class="input-group-append">
                                        <button (click)="getLists()" class="btn btn-default"
                                            type="submit"><i class="icon-magnifier"
                                                [attr.aria-label]="l('Search')"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-4" [hidden]="!advancedFiltersAreShown">
                        <div class="col-md-4">
                            <div class="form-group">
                                <select class="form-control" name="MessageReleaseState"  [(ngModel)]="MessageReleaseState" (change)="getLists()">
                                    <option value="0" checked="checked">{{'MessageReleaseState' | localize}}</option>
                                    <!-- <option value="">{{'UnSelect' | localize}}</option> -->
                                    <option value="1">{{'MessageHasRelease' | localize}}</option>
                                    <option value="2">{{'MessageNotRelease' | localize}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <select class="form-control" name="menuFilter"  [(ngModel)]="menuFilter" (change)="getLists()">
                                    <option value="" checked="checked" >{{'SourceMenuName' | localize}}</option>
                                    <option *ngFor="let rec of recArr" [value]="rec.title">{{rec.title}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <select class="form-control" name="timePhasingSelect"  [(ngModel)]="timePhasing" (change)="getLists()">
                                    <option value="0">时间范围</option>
                                    <option value="1">24小时内</option>
                                    <option value="7">7天内</option>
                                    <option value="15">半个月内</option>
                                    <option value="30">一个月内</option>
                                    <option value="90">三个月内</option>
                                    <option value="120">六个月内</option>
                                    <option value="365">一年内</option>
                                    <option value="730">两年内</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-sm-12">
                            <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown"
                                (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i
                                    class="fa fa-angle-down"></i> {{"ShowAdvancedFilters" | localize}}</span>
                            <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown"
                                (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i
                                    class="fa fa-angle-up"></i> {{"HideAdvancedFilters" | localize}}</span>
                        </div>
                    </div>
                </div>
            </form>

            <div class="row align-items-center">
                <!--<Primeng-TurboTable-Start>-->
                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                    <p-table #dataTable sortMode="multiple" (onLazyLoad)="getLists($event)"
                        [value]="primengTableHelper.records"
                        rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                        [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                        [responsive]="primengTableHelper.isResponsive"
                        [resizableColumns]="primengTableHelper.resizableColumns"
                        [(selection)]="selectedDatas"
                        dataKey="id" 
                        selectionMode="multiple">
                        <ng-template pTemplate="header">
                            <tr>
                                <th style="width:80px;">
                                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                </th>
                                <!-- <th style="width: 8%">
                                    {{'Actions' | localize}}</th> -->
                                <th style="width: 150px;">
                                    称呼
                                </th>
                                <th style="width: 150px;" >
                                    公司名称
                                </th>
                                <th style="width: 150px;">
                                    联系方式
                                </th>
                                <th style="width: 150px;">
                                    行业角色
                                </th>
                                <th style="width: 150px;">
                                    行业
                                </th>
                                <th style="width: 250px;">
                                    主要营销目标
                                </th>
                                <th style="width: 250px;">
                                    公司网站
                                </th>
                                <th style="width: 150px;color: #aaa;" >
                                    {{'SourceMenuName' | localize}}
                                </th>
                                <th style="width: 110px;color: #aaa;">
                                    {{'InfoState' | localize}}
                                </th>
                                <th style="width: 180px;color: #aaa;">
                                    {{'CreationTime' | localize}}
                                </th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-record="$implicit">
                            <tr>
                                <td style="width: 80px;">
                                    <p-tableCheckbox [value]="record" (click)="$event.stopPropagation()"></p-tableCheckbox>
                                </td>
                                <!-- <td style="width: 8%">
                                    <div class="btn-group" dropdown placement="bottom left" container="body">
                                        <button id="dropdownButton" type="button"
                                            class="btn btn-primary btn-xs2 blue dropdown-toggle" dropdownToggle
                                            aria-controls="dropdownMenu">
                                            <i class="fa fa-cog"></i><span class="caret"></span>
                                            {{"Actions" | localize}}
                                        </button>
                                        <ul id="dropdownMenu" class="dropdown-menu" role="menu" *dropdownMenu
                                            aria-labelledby="dropdownButton">
                                            <li role="menuitem" *ngIf="permissionDic['Pages_Manage_JobApplied_Query'] && !permissionDic['Pages_Manage_JobApplied_Update']">
                                                <a href="javascript:void(0)" (click)="editJob(record)" class="dropdown-item">查看</a>
                                            </li>
                                            <li role="menuitem" *ngIf="permissionDic['Pages_Manage_JobApplied_Update']">
                                                <a href="javascript:void(0)" (click)="editJob(record)" class="dropdown-item">{{'Edit' |
                                                    localize}}</a>
                                            </li>
                                            <li role="menuitem" *ngIf="permissionDic['Pages_Manage_JobApplied_Delete']">
                                                <a href="javascript:void(0)" (click)="deleteJob(record.id)" class="dropdown-item">{{'Delete' |
                                                    localize}}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </td> -->
                                <td style="width: 150px;">
                                    <span class="p-column-title"> 称呼</span>
                                    {{record.loginName}}
                                </td>
                                <td style="width: 150px;">
                                    <span class="p-column-title">公司名称</span>
                                    {{record.companyName}}
                                </td>
                                <td style="width: 150px;">
                                    <span class="p-column-title">联系方式</span>
                                    {{record.contact}}
                                </td>
                                <td style="width: 150px;">
                                    {{record.industryRole}}
                                </td>
                                <td style="width: 150px;">
                                    {{record.industry}}
                                </td>
                                <td style="width: 250px;">
                                    {{record.intro}}
                                </td>
                                <td style="width: 250px;">
                                    {{record.companyURL}}
                                </td>
                                <td style="width: 150px;color: #aaa;">
                                    <span class="p-column-title">{{'SourceMenuName' | localize}}</span>
                                    {{record.subhead}}
                                </td>
                                <td style="width: 110px;color: #aaa;">
                                    <span class="p-column-title"> {{'InfoState' | localize}}</span>
                                    <span *ngIf="record.isActive">{{'MessageHasRelease' | localize}}</span>
                                    <span *ngIf="!record.isActive">{{'MessageNotRelease' | localize}}</span>
                                </td>
                                <td style="width: 180px;color: #aaa;">
                                    <span class="p-column-title"> {{'CreationTime' | localize}}</span>
                                    {{record.creationTime | luxonFormat:'yyyy-LL-dd HH:mm:ss' }}
                                </td>
                            </tr>
                        </ng-template>
                    </p-table>
                    <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                        {{'NoData' | localize}}
                    </div>
                    <div class="primeng-paging-container">
                        <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                            (onPageChange)="getLists($event)"
                            [totalRecords]="primengTableHelper.totalRecordsCount"
                            [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                            [showCurrentPageReport]="true"
                            [currentPageReportTemplate]="'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount">
                        </p-paginator>
                    </div>
                </div>
                <!--<Primeng-TurboTable-End>-->
            </div>
        </div>

    </menu-Info-container>

    <editMessageModal #editMessageModal (modalSave)="getLists()"></editMessageModal>
</div>